<template>
    <div class="book-manage">
        <!-- 顶部操作区域 -->
        <div class="toolbar">
            <h2>图书列表</h2>
            <div class="search-bar">
                <input v-model="searchKeyword" type="text" placeholder="请输入书名" />
                <button @click="handleSearch">搜索</button>
            </div>
        </div>

        <!-- 图书列表区域 -->
        <table class="book-table" @scroll="handleScroll">
            <thead>
            <tr>
                <th>书名</th>
                <th>作者</th>
                <th>价格</th>
                <th>库存</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="book in filteredBooks" :key="book.id">
                <td>{{ book.name }}</td>
                <td>{{ book.author }}</td>
                <td>{{ book.price }}</td>
                <td>{{ book.stock }}</td>
            </tr>
            </tbody>
        </table>

        <!-- 加载更多提示 -->
        <div v-if="isLoading" class="loading-indicator">加载中...</div>
    </div>
</template>